$(document).ready( allowTreeAnnotation );


function allowTreeAnnotation() {
    $('#mainPanel').mousemove( moveButton );
}


function moveButton( p ) {

    var localGlobal = globals;
    var localConfig = config;

    if( ! localGlobal.mainPanelTreeInfo.id ) { return; }
    
    if( isContextMenu() ) { return; }

    var mainPanel = $('#mainPanel');
    var mainPanelOffset = mainPanel.offset();

    var closestClade =
        findClosestClade(
            { x: p.pageX, y: p.pageY, closestClade: undefined, currentDistance: 1000000,
              scaleValue: { x:1, y:1 }, scaling: 'unscaled', clade: localGlobal.mainPanelTreeInfo.tree,
              offset: { y: mainPanelOffset.top - mainPanel.scrollTop(),
                        x: mainPanelOffset.left - mainPanel.scrollLeft() } } ).clade;

    var buttonCoords = { x: closestClade.coords.unscaled.x,
                         y: closestClade.coords.y,
                         radius: localConfig.buttonRadius.value };
                        
    if( localGlobal.cladeButton ) {

        if( closestClade.id == localGlobal.cladeButton.id ) { return; }

        var oldCoords = localGlobal.cladeButton.getBBox();

        localGlobal.cladeButton.translate( buttonCoords.x - oldCoords.x - buttonCoords.radius,
                                           buttonCoords.y - oldCoords.y - buttonCoords.radius ).toFront();

    } else {

        localGlobal.cladeButton =
            localGlobal.mainPanelCanvas.circle( buttonCoords.x, buttonCoords.y, buttonCoords.radius )
                            .attr( { fill: localConfig.buttonColor.value,
                                     stroke: localConfig.buttonColor.value,
                                     "fill-opacity": .7,
                                     "stroke-width": 2 } ).click( cladeButtonOnClick );
    }

    localGlobal.cladeButton.id = closestClade.id;
}

function cladeButtonOnClick( p ) {

    makeContextMenu( { container: $('#mainPanel'), 
                   menuItems: [ { text: 'Save Clade for Grafting',
                                  func: showSaveCladeDialogue,
                                  params: { cladeId: globals.cladeButton.id } } ],
                    x: p.pageX, y: p.pageY } );
}

function showSaveCladeDialogue( p ) {

    var cladeId = p.data.cladeId;
    
    Shadowbox.open( { content: "",
                      player: "html",
                      title: "Save Clade for Grafting",
                      height: $(window).height() * .25,
                      width: $(window).width() * .25,
                      options: {
                          onFinish: function() { addSaveCladeContent( { cladeId: cladeId } ); } } } );
}

function addSaveCladeContent( p ) {

    $('#sb-player').append(
        makeEl('div').attr( { 'class': 'topMargin1' } ).append(
            makeEl('div').attr( { 'class': 'width30 right fLeft rightMargin1' } ).text( 'Name : ' ),
            makeEl('div').attr( { 'class': 'width60 fLeft' } ).append( makeEl('input').attr( { 'id': 'savedCladeName' } ) ),
            makeEl('div').attr( { 'class': 'clear' } ) ),
        makeEl('div').attr( { 'class': 'right width90' } ).append(
                makeEl('a').attr( { 'class': 'rightMargin1',
                                    'href': 'javascript:void(0);' } )
                           .text('Save')
                           .bind( 'click', { cladeId: p.cladeId }, ajaxSaveClade )
                           .bind( 'click', { }, closeShadowbox ),
                makeEl('a').attr( { 'href': 'javascript:void(0);' } ).text('Cancel').click( closeShadowbox ) ) );
}

function ajaxSaveClade( p ) {

    var name = $('#savedCladeName').val();

    if( name == '' ) { name = 'Untitled Saved Clade'; }

    $.ajax( { url: makeAjaxURL( { 'argList': [ 'saveClade' ] } ),
              type: "POST",
              data: { nodeId: p.data.cladeId, name: name },
              success: handleSaveCladeResponse } )
}

function handleSaveCladeResponse( response ) {
    
    notify( { 'container': $('#mainPanel'), 'text': 'Clade Saved' } );
}
